<template>
	<div class="ma-content-block lg:flex justify-between p-4">
		<!-- CRUD 组件 -->
		<ma-crud :options="crud" :columns="columns" ref="crudRef">
			<!-- 状态列 -->
			<template #status="{ record }">
				<a-switch :checked-value="1" unchecked-value="2" @change="changeStatus($event, record.id)" :default-checked="record.status == 1" />
			</template>

			<template #operationBeforeExtend="{ record }" v-if="!isRecovery">
				<a-link @click="openLeaderModal(record)"><icon-user /> 领导列表</a-link>
			</template>
		</ma-crud>

		<leader-list ref="leaderRef" />
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import dept from '@/api/system/dept'
import { Message } from '@arco-design/web-vue'
import LeaderList from './leader.vue'

const crudRef = ref()
const leaderRef = ref()

const changeStatus = async (status, id) => {
	const response = await dept.changeStatus({ id, status })
	if (response.code === 200) {
		Message.success(response.message)
	}
}

const openLeaderModal = (record) => {
	leaderRef.value.open(record)
}

let isRecovery = computed(() => (crudRef.value ? crudRef.value.isRecovery : false))

const crud = reactive({
	api: dept.getList,
	recycleApi: dept.getRecyclePageList,
	showIndex: false,
	pageLayout: 'fixed',
	rowSelection: { showCheckedAll: true },
	operationColumn: true,
	operationColumnWidth: 220,
	add: { show: true, api: dept.save, auth: ['/core/dept/save'] },
	edit: { show: true, api: dept.update, auth: ['/core/dept/update'] },
	delete: { show: true, api: dept.deletes, auth: ['/core/dept/destroy'], realApi: dept.realDestroy, realAuth: ['/core/dept/realDestroy'] },
	recovery: { show: true, api: dept.recoverys, auth: ['/core/dept/recovery'] },
	isExpand: true,
})

const columns = reactive([
	{ title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: true },
	{
		title: '上级部门',
		dataIndex: 'parent_id',
		hide: true,
		formType: 'tree-select',
		dict: { url: '/core/dept/index?tree=true' },
		editDefaultValue: (record) => {
			return record.parent_id == 0 ? undefined : record.parent_id
		},
	},
	{
		title: '部门名称',
		dataIndex: 'name',
		search: true,
		width: 150,
		commonRules: [{ required: true, message: '部门名称必填' }],
	},
	{ title: '负责人', dataIndex: 'leader', search: true, width: 120 },
	{
		title: '手机',
		dataIndex: 'phone',
		search: true,
		width: 150,
		commonRules: [{ match: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码' }],
	},
	{
		title: '排序',
		dataIndex: 'sort',
		formType: 'input-number',
		addDefaultValue: 1,
		width: 180,
		min: 0,
		max: 1000,
	},
	{
		title: '状态',
		dataIndex: 'status',
		search: true,
		formType: 'radio',
		dict: { name: 'data_status', props: { label: 'label', value: 'value' } },
		addDefaultValue: '1',
		width: 120,
	},
	{
		title: '备注',
		dataIndex: 'remark',
		hide: true,
		formType: 'textarea',
	},
	{
		title: '创建时间',
		dataIndex: 'create_time',
		addDisplay: false,
		editDisplay: false,
		width: 180,
	},
])
</script>

<script>
export default { name: 'system:dept' }
</script>

<style scoped></style>
